<template>
	<div class="alarmResults">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe738;</i>
				告警管理/
				<span>告警结果查询</span>
			</div>
		</div>
		<div class="right_main">
			<div class="divider2"></div>
			<el-form :model="ruleForm"  ref="ruleForm" class="demo-form-inline" :inline="true">
				<div class="import">
					<el-form-item label="查询时间段：" prop="addStartDate" >
						<el-date-picker v-model="ruleForm.addStartDate" type="datetime" placeholder="选择开始时间" @change="dateChange1">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="—" prop="addEndDate"  >
						<el-date-picker  v-model="ruleForm.addEndDate" type="datetime" placeholder="选择结束时间" @change="dateChange2">
						</el-date-picker>
					</el-form-item>
				</div>
				<el-form-item class="conmit">
					<el-button type="primary" @click="findForm('ruleForm')" icon="plus">立即查询</el-button>
				</el-form-item>
			</el-form>
			<div class="divider2"></div>
			<div class="block">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="pageSizes"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="dataTotal"></el-pagination>
			</div>
			<div class="table">
				<el-table :data="tableData" border style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" >
					<el-table-column v-for="(val,key) in tableHeader" :prop="val.prop" :label="val.label" :key=key sortable>
					</el-table-column>
				</el-table>
			</div>
			
		</div>
	</div>
</template>
<script src="../../../../assets/js/date.js"></script>
<script src="./alarmResults.js"></script>
<style lang="stylus" rel="stylesheet/stylus" src="./alarmResults.styl"></style>